<template>
  <div :class="['sd-table','flex-cloumn', elementTag]" ref="tableBox">
    <el-table
      :height="autoH ? null : height"
      :cell-class-name="cellName ? customCellName : ''"
      :fit="fit"
      :class="customClass"
      @header-contextmenu="showTableAllocation"
      :border="border"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <!-- 首列标识 -->
      <el-table-column v-if="$index" type="index" width="50px" />
      <!-- 多选 -->
      <el-table-column :selectable="selectable" v-if="selection" type="selection" width="55"></el-table-column>
      <template v-for="col of columns">
        <!-- 默认显示 -->
        <el-table-column
          v-if="!col.custom"
          :align="col.align || 'center'"
          :width="col.width || ''"
          :key="col.prop"
          :show-overflow-tooltip="col.tooltip"
          :fixed="col.fixed"
          :min-width="col.minW"
          :prop="col.prop"
          :label="col.label"
        ></el-table-column>
        <!-- 自定义列 -->
        <el-table-column
          :width="col.width || ''"
          :label="col.label"
          :min-width="col.minW"
          :show-overflow-tooltip="col.tooltip"
          :fixed="col.fixed"
          :key="col.prop"
          v-else
          :align="col.align || 'center'"
        >
          <template slot-scope="scope">
            <!-- @vuese -->
            <!-- 自定义表格列 -->
            <slot v-bind="{row: scope.row, column: col, rowIndex: scope.$index}"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <sd-paging
      v-if="!disablePage"
      :size="size"
      :page="page"
      :total="total"
      @size-change="sizeChange"
      @page-change="pageChange"
    ></sd-paging>

    <!-- table配置 -->
    <!-- <el-dialog :visible.sync="showAllocationDialog" title="表格配置界面">
    </el-dialog>-->
  </div>
</template>

<script>
import sdPaging from "./paging/paging.vue";
export default {
  name: "sd-table",
  components: {
    sdPaging
  },
  props: {
    // 表格列的定义
    columns: {
      // {label: string, prop: string, custom?: string, width?: number, minW? number, align?: string, tooltip?: boolean}
      type: Array,
      default: () => [],
      required: true
    },
    //表格border
    border: {
      default: true,
      type: Boolean
    },
    // 自定义表格某行某列的className
    cellName: {
      // { label: string; className: string; rowIndex?: number }[]
      type: Array,
      default: () => []
    },
    // 宽度是否自动撑开
    fit: {
      type: Boolean,
      default: true
    },
    // 自定义表格类名
    customClass: String,
    // 数据总条数
    total: Number,
    // 分页条显示条数
    size: Number,
    // 分页条显示页数
    page: Number,
    // 是否可选
    selectable: Function,
    // 是否禁用分页条
    disablePage: Boolean,
    // 是否可勾选
    selection: Boolean,
    // 是否显示$index(序列号)
    $index: Boolean,
    // table的高度是否自动撑开
    autoH: Boolean
  },
  data() {
    return {
      height: "auto",
      elementTag: "sd-table-uid",
      showAllocationDialog: false
    };
  },
  // created
  created() {
    this.elementTag = `${this.elementTag}-${this._uid}`;
  },
  watch: {
    "$store.state.resize"() {
      this.resize();
    }
  },

  mounted() {
    this.$nextTick(() => {
      if (this.autoH) return;
      this.resize();
    });
  },
  // handleCurrentChange(val:any) {
  //       this.currentRow = val;
  //     }
  /* methods */
  // 自定义table .cell 的class
  methods: {
    customCellName({ column, row, rowIndex }) {
      let className = "";
      for (let i = 0; i < this.cellName.length; i++) {
        let isRow = true;
        if (this.cellName[i].rowIndex || this.cellName[i].rowIndex === 0) {
          isRow = this.cellName[i].rowIndex === rowIndex;
        }
        if (this.cellName[i].label === column.label && isRow) {
          className = this.cellName[i].className;
          break;
        }
      }
      return className;
    },

    // 显示table配置
    showTableAllocation(column, event) {
      event.preventDefault();
      event.stopPropagation();
      this.showAllocationDialog = true;
    },

    // resize 计算表格高度
    resize() {
      if (this.autoH) return;
      let element = this.$refs.tableBox;
      let pageH = this.disablePage ? 0 : 35;
      if (element) {
        let padding = this.getElementStyle(element, "paddingTop");
        padding = padding ? parseInt(padding) : 0;
        this.height = element.clientHeight - padding * 2 - pageH;
      }
    },

    getElementStyle(element, attr) {
      if (element.currentStyle) {
        return element.currentStyle[attr];
      } else {
        return document.defaultView.getComputedStyle(element, null)[attr];
      }
    },

    // 调用绑定方法
    sizeChange(size) {
      // 分页条显示条数发生变化
      // @arg { pageSize: size }
      this.$emit("size-change", { pageSize: size });
    },

    pageChange(page) {
      /**
       * 分页条所在页发生变化
       * @arg { pageNumber: page }
       */
      this.$emit("page-change", { pageNumber: page });
    }
  }
};
</script>

<style scoped lang="scss">
</style>